<template>
	<view class="accSet-wrap">
		<view class="u-p-30">
			<view >
				<view v-if="current==0" style="padding: 0px 20px;">
					<u-form label-width='180' :model="accForm" ref="accForm">
						<u-form-item prop="user_name" label="姓名：">
							<u-input :disabled='true' v-model="accForm.user_name" />
						</u-form-item>
						<u-form-item prop="user_tel" label="电话：">
							<u-input :disabled='true' type='number' v-model="accForm.user_tel" placeholder='未设置费用为免费下载模板！' />
						</u-form-item>
						<u-form-item prop="user_nickname" label="昵称：">
							<u-input v-model="accForm.user_nickname" placeholder='请输入用户昵称' />
						</u-form-item>
						<u-form-item label="头像：">
							<view class="acc-headImg" v-if="accForm.user_front_head_portrait">
								<image :src="accForm.user_front_head_portrait" mode=""></image>
							</view>
							<view class="cent-fl" v-else>
								
								<u-button @click="select">切换头像</u-button>
								<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
							</view>

							<text class="u-m-l-10" style="color:red;" @click="delProtrait" v-if="accForm.user_front_head_portrait">删除</text>
						</u-form-item>
						<u-form-item label="简介：">
							<u-input v-model="accForm.user_brief_introduction" placeholder='请输入个人简介' />
						</u-form-item>
					</u-form>
					<view class="u-m-t-50">
						<u-button type='warning' shape='circle' 
						style="background: linear-gradient(180deg, #76D904 0%, #417505 100%);" @click='accSubmit'>
						保存设置
						</u-button>
					</view>
				</view>
				
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- <l-file ref="lFile" @up-success="onSuccess"></l-file> -->
	</view>
</template>

<script>
	//import centHead from '../../components/centHead/centHead.vue'
	//import lFile from '@/components/l-file/l-file.vue'
	import {
			pathToBase64,
			base64ToPath
		} from '../../utils/image-tool.js';
	export default {
		components: {
		//	centHead: centHead,
			//lFile,
		},
		data() {
			return {
				list: [{
					name: '完善信息',
				},
					{
						name: '更改密码',
					}
				],
				current: 0,
				accForm: {
					user_front_head_portrait: null,
					user_name: null,
					user_nickname: null,
					user_tel: null,
					user_email: null,
					user_brief_introduction:null,
				},
				passForm: {
					oldPwd: null,
					pwd: null,
					surePwd: null,
					uuid: null,
				},
				url: "",
				path: ""
			}
		},
		mounted() {
			// #ifdef H5
			this.banInput()
			// #endif
		},
		onShow() {
			if (uni.getStorageSync('userData')) {
				this.userData = JSON.parse(uni.getStorageSync('userData'))
			} else {
				this.userData = {}
				uni.reLaunch({
					url: '../../pages/login/login'
				})
			}
			this.getAccountData()
		},
		methods: {
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.url = rst.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.url = "";
				this.path = ev.path;
				console.log(this.path)
				pathToBase64(this.path).then(res => {
					uni.request({
						url: 'https://admin.515f.com/api/weixin/applet/base64_to_image_url',
						method: 'POST',
						data: {
							imageBase64:  res
							},
						success: res2 => {
							this.accForm.user_front_head_portrait = res2.data.data
						}
					})
				})
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			delProtrait() {
				this.accForm.user_front_head_portrait = null;
				// #ifdef H5
				this.banInput()
				// #endif
			},

			/* 上传 */
			onUpload() {
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换
					url: 'https://www.515f.com/api/rest/v1/venusSysModelServiceImpl/uploadFile',
					//默认file,上传文件的key
					name: 'uploadFile',
					// header: {'Content-Type':'类型','Authorization':'token'},
					//...其他参数
				});
			},
			onSuccess(res) {
				this.accForm.user_front_head_portrait = JSON.parse(res.data.id).data
			},
			// 密码修改
			passSubmit() {
				this.passForm.uuid = uni.getStorageSync('uuid')
				this.$request.api.uploadPass(this.passForm).then(res => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '密码修改成功',
							type: 'success',
							icon: false
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							icon: false
						})
					}
				})
			},
			// 保存信息
			accSubmit() {
				this.accForm.uuid = uni.getStorageSync('uuid')
				this.$request.api.accountSub(this.accForm).then(res => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '信息保存成功',
							type: 'success',
							icon: false
						})
						this.userData.userFrontHeadPortrait = this.accForm.user_front_head_portrait
						this.userData.userNickname = this.accForm.user_nickname

						uni.setStorageSync(
								'userData',
								JSON.stringify(this.userData)
						)
					} 
					// else {
					// 	this.$refs.uToast.show({
					// 		title: res.msg,
					// 		type: 'error',
					// 		icon: false
					// 	})
					// }
				})
			},
			// 上传头像
			uploadLaws(val) {
				let _this = this;
				var reader = new FileReader(); //实例化文件读取对象
				reader.readAsDataURL(val); //将文件读取为 DataURL,也就是base64编码
				reader.onload = function(ev) { //文件读取成功完成时触发
					var dataURL = ev.target.result; //获得文件读取成功后的DataURL,也就是base64编码
					document.querySelector("img").src = dataURL; //将DataURL码赋值给img标签
					_this.$request.api.image({
						imageBase64: dataURL
					}).then(res => {
						_this.accForm.user_front_head_portrait = res.data

					})
				}
			},
			banInput() {
				this.$nextTick(function() {
					var image = document.createElement('input')
					image.style.width = "100%";
					image.type = 'file' //添加file类型
					image.multiple = 'multiple' // 可以选择多个
					image.accept = "image/jpeg,image/jpeg,image/png" // 限制只能上传PDF文件，可以不限制，能上传任何类型
					image.style.height = "100%";
					image.style.position = "absolute";
					image.style.top = "0";
					image.style.right = "0";
					image.style.opacity = "0";
					image.style.overflow = "hidden"; //防止注意input 元素溢出
					image.id = 'file';
					var _this = this;
					setTimeout(() => {
						this.$refs.image.$el.appendChild(image);
						image.onchange = (event) => { // 点击上传选择文件
							var file = event.target.files;
							if (file.length > 0) {
								file.forEach(item => { // 因为后台限制，只能一个一个文件的上传，所以当选择多个文件后，需要遍历一个一个调用上传接口
									_this.uploadLaws(item); // 上传图片
								})
							}
						}
					}, 1000)
				})
			},
			// 获取账户信息
			getAccountData() {
				this.$request.api.getAccDat({
					uuid: uni.getStorageSync('uuid')
				}).then(res => {
					console.log(res.data,'+++gerenzhognx ++')
					let dataObj = res.data.data;
					this.accForm.user_front_head_portrait = dataObj.userFrontHeadPortrait
					this.accForm.user_name = dataObj.userName
					this.accForm.user_nickname = dataObj.userNickName
					this.accForm.user_tel = dataObj.userTel
					this.accForm.user_brief_introduction = dataObj.userBriefIntroduction
				})
			}
		}
	}
</script>

<style lang="scss">
	.acc-headImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
